<template>
  <el-dialog
    title="区域查车"
    :visible.sync="dialogVisible"
    width="40%"
    class="area-search-dialog"
  >
    <ul>
      <li>总数:0</li>
      <li>在线数:0</li>
      <li>离线数:0</li>
      <li><el-button size="mini" type="primary">导出</el-button></li>
    </ul>

    <el-table
      :data="tableData"
      height="400"
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code"
        label="车牌号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="time"
        label="时间">
      </el-table-column>
      <el-table-column
        prop="speed"
        label="速度">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: []
    };
  },

  methods: {
    show(isCover) {
      this.dialogVisible = !this.dialogVisible;
      let data = {
        date: 1,
        code: '14020843471',
        time: '	2021-06-30 17:27:14',
        speed: '0km/h',
        address: '四川省成都市武侯区联邦财富中心'
      }
      isCover? this.tableData.push(data) : this.tableData = []
    }
  }
};
</script>

<style lang="scss">
.area-search-dialog {
  .el-dialog__header {
    background-color: #479de6 !important;

    .el-dialog__title, .el-dialog__close {
      color: #fff;
    }
  }

  ul {
    margin-bottom: 10px;

    li {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      padding: 0 5px;
      font-size: 16px;
    }
  }
}
</style>
